<!--轮播图-->

<template>
	<!--banner-->
	<swiper indicator-dots autoplay circular :interval="5000" :duration="150" indicator-color="rgba(255, 255, 255, 0.9)"
	 indicator-active-color="#5677fc" class="tui-banner-swiper">
		<swiper-item v-for="(banner,index) in banners" :key="index" @tap.stop="bannerDetail(banner)">
			<view class="tui-banner-title">{{banner.title}}</view>
			<image :src="banner.imageUrl" class="tui-slide-image" mode="widthFix" />
		</swiper-item>
	</swiper>	
</template>

<script>
	const webViewUrl = "/pages/index/webView"
	import indexApi from "@/request/api/indexApi.js"
	import moment from "moment"
	export default {
		data() {
			return {
				banners: [],
				jumpTypes:{
					noJump:0, //不跳
					jumpIn:1, //跳站内
					jumpOut:2 //跳站外
				}
			}
		},
		created() {
			this.getBanners();
		},
		methods: {
			/**
			 * 获取所有轮播图
			 */
			getBanners(){
				indexApi.getBanners().then((data)=>{
					if(data.code === 0){
						this.banners = data.data
						this.filterBanners();
					}
				})
			},
			/**
			 * 过滤轮播图（当前时间不在 banner开始与结束时间内的，过滤掉）
			 */
			filterBanners(){
				let filterList = [];
				this.banners.forEach((banner)=>{
					if(!this.timeIsBeyond(banner.startTime,banner.endTime)){
						filterList.push(banner)
					}
				})
				this.banners = filterList;
			},
			//判断时间是否超出范围内
			timeIsBeyond(startTime,endTime){
				let start = moment(startTime).valueOf();
				let end = moment(endTime).valueOf();
				let now = moment().valueOf();
				return !(now>=start && now<= end)
			},
			
			/**
			 * 点击轮播图时，跳转到对应的链接
			 * 轮播图有多种跳转方式：不跳转、跳站内、跳站外
			 */
			bannerDetail: function(banner) {
				if(banner.jumpType == this.jumpTypes.noJump){
					return;
				}
				if(banner.jumpType == this.jumpTypes.jumpIn){
					uni.navigateTo({
						url:banner.jumpUrl
					})
				}
				if(banner.jumpType == this.jumpTypes.jumpOut){
					uni.navigateTo({
						url:`${webViewUrl}?url=${banner.jumpUrl}`
					})
				}				
			},
			
		},
	}
</script>

<style>
	/* 轮播图 */
	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center;
	}
	
	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-banner-swiper {
		width: 100%;
		height: 300rpx;
		position: relative;
	}
	
	.tui-slide-image {
		width: 100%;
		height: 300rpx;
		display: block;
	}
	
	.tui-banner-title {
		width: 100%;
		height: 100rpx;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		padding: 0 30rpx;
		padding-top: 25rpx;
		font-size: 34rpx;
		font-weight: bold;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	
	.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}
	
	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}
	
	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #5677fc;
	}
	
	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 18rpx;
	}
	
	
	>>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}
	
	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}
	
	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background: #5677fc;
	}
	
	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 18rpx;
	}
	/* 轮播图 */
</style>
